<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-21 09:50:52
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-11-30 16:29:22
-->
<template>
  <a-form :model="formState" name="itemName" :label-col="{ style: { width: '100px' } }">
    <a-form-item
      label="类别名称"
      name="itemName"
      :rules="[{ required: true, message: '请输入类别名称!' }]"
    >
      <a-input v-model:value="formState.itemName" />
    </a-form-item>
    <a-form-item label="绑定PC项目ID" name="snzoWebId">
      <a-input v-model:value="formState.snzoWebId" />
    </a-form-item>
    <a-form-item label="排序" name="orderNumber">
      <a-input v-model:value="formState.orderNumber" />
    </a-form-item>
    <a-form-item label="状态" name="isShow">
      <a-switch
        :checked="formState.isShow === 1"
        checked-children="开启"
        un-checked-children="关闭"
        @click="(checked) => switchClick(checked)"
      />
    </a-form-item>
    <a-form-item label="详情" name="detail">
      <RichTextEditor
        ref="editorRef"
        :editConfig="{ height: 300 }"
        v-model:initialValue="formState.detail"
      />
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const props = defineProps({
  formData: {
    type: Object,
    default(rawProps) {
      return rawProps;
    },
  },
});
const editorRef = ref();
const formState = reactive(props.formData);
const switchClick = (checked) => {
  formState.isShow = checked ? 1 : 0;
};
const getAllValue = () => {
  return Object.assign(formState, { detail: editorRef.value.contentValue });
};
defineExpose({
  formState,
  getAllValue,
});
</script>
<style lang="less" scoped></style>
